<template>
  <teleport to="body">
    <div v-if="visible" class="modal">
      <div class="modal-content">
        <span class="close" @click="close">&times;</span>
        <h4>点评详情</h4>
        <!-- <h2>{{message}}</h2> -->
        <div>
          <a-row class="comment_conent">
            <a-col :xs="16" :xl="17">
              <div>
                <a-comment>
                  <template #actions>
                    <div class="comment_left">
                      <div>
                        <span key="comment-basic-reply-to">Redmi X20</span>
                      </div>
                      <div>
                        <span key="comment-basic-like">
                          <a-tooltip title="Like">
                            <template v-if="action === 'liked'">
                              <LikeFilled @click="like" />
                            </template>
                            <template v-else>
                              <LikeOutlined @click="like" />
                            </template>
                          </a-tooltip>
                          <span style="padding-left: 8px; cursor: auto">
                            {{ likes }}
                          </span>
                        </span>
                        <span key="comment-basic-dislike">
                          <a-tooltip title="Dislike">
                            <template v-if="action === 'disliked'">
                              <DislikeFilled @click="dislike" />
                            </template>
                            <template v-else>
                              <DislikeOutlined @click="dislike" />
                            </template>
                          </a-tooltip>
                          <span style="padding-left: 8px; cursor: auto">
                            {{ dislikes }}
                          </span>
                        </span>
                      </div>
                    </div>
                  </template>
                  <template #author><a>02-05</a></template>
                  <template #avatar>
                    <a-avatar
                      src="https://joeschmoe.io/api/v1/random"
                      alt="Han Solo"
                    />
                  </template>
                  <template #content>
                    <span>评分：</span><a-rate :value="2" disabled />
                    <p>
                      开发组目前精心制作了将近3000个关卡，120多种丰富逗趣的关卡元素，更有冒险模式、经典模式、换装玩法、家装玩法、塔防玩法等多种游戏模式
                      We supply a series of design principles, practical
                      patterns and high quality design resources (Sketch and
                      Axure), to help people create their product prototypes
                      beautifully and efficiently.
                    </p>
                  </template>
                  <template #datetime>
                    <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
                      <span>{{ dayjs().fromNow() }}</span>
                    </a-tooltip>
                  </template>
                </a-comment>
              </div>
            </a-col>
            <a-col :xs="7" :xl="6" style="margin-top: 20px">
              <div>
                <div>
                  <a-image-preview-group
                    :preview="{
                      visible22,
                      onVisibleChange: vis => (visible22 = vis),
                    }"
                  >
                    <a-image
                      v-for="(item, index) in detailData.images"
                      :src="item"
                      :key="index"
                    />
                  </a-image-preview-group>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
        <div style="margin-top: 14px">
          <h4>回复列表</h4>
          <div>
            <!-- 外层评论循环 -->
            <a-comment v-for="(comment, index) in comments" :key="index">
              <template #actions>
                <span>回复</span>
              </template>
              <template #author>
                <a>{{ comment.author }}</a>
              </template>
              <template #avatar>
                <a-avatar :src="getRandomAvatar()" :alt="comment.author" />
              </template>
              <template #content>
                <p>{{ comment.content }}</p>
              </template>

              <!-- 内层评论循环 -->
              <a-comment
                v-for="(reply, replyIndex) in comment.replies"
                :key="`reply-${index}-${replyIndex}`"
              >
                <template #actions>
                  <span>Reply to</span>
                </template>
                <template #author>
                  <a>{{ reply.author }}</a>
                </template>
                <template #avatar>
                  <a-avatar :src="getRandomAvatar()" :alt="reply.author" />
                </template>
                <template #content>
                  <p>{{ reply.content }}</p>
                </template>
              </a-comment>
              <!-- 内层评论循环 -->
              <a-comment
                v-for="(reply1, replyIndex1) in comment.replies.replies1"
                :key="`reply-${index}-${replyIndex1}`"
              >
                <template #actions>
                  <span>Reply to</span>
                </template>
                <template #author>
                  <a>{{ reply1.author }}</a>
                </template>
                <template #avatar>
                  <a-avatar :src="getRandomAvatar()" :alt="reply1.author" />
                </template>
                <template #content>
                  <p>{{ reply1.content }}</p>
                </template>
              </a-comment>
            </a-comment>
          </div>
        </div>
        <div class="footer">
          <a-button
            style="
              margin-right: 16px;
              background-color: rgba(76, 200, 126, 1);
              border-radius: 2px;
            "
            type="primary"
            @click="handleOk"
            >确定</a-button
          >
          <a-button style="margin-left: 8px; border-radius: 2px" @click="close"
            >取消</a-button
          >
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref, reactive } from 'vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
import {
  // PlusOutlined,
  DislikeFilled,
  DislikeOutlined,
  LikeFilled,
  LikeOutlined,
} from '@ant-design/icons-vue'

// Props
const props = defineProps({
  visible: Boolean,
  message: String,
})

// Emits
const emit = defineEmits(['update:visible', 'submit'])

// Reactive form state
const formState = reactive({
  way: '',
  cause: '',
  screenshot: [],
})

// Form rules
// const rules = reactive({
//   way: [{ required: true, message: '请选择下架方式' }],
//   cause: [{ required: true, message: '请输入下架原因' }],
// //   screenshot: [{ required: true, message: '请上传截图' }],
// });

// Methods
const close = () => {
  emit('update:visible', false)
}

const detailData = reactive({
  id: 158784,
  title: '',
  content: '#游戏种草 血之荣耀2传奇，战桩格斗游戏你们玩过吗？',
  content_json:
    '[{"inlineStyleEntityList":[{"inlineType":"topic","length":5,"offset":0,"spanExtendJson":"{\\"brand_id\\":0,\\"brand_name\\":null,\\"release_time\\":0,\\"series_id\\":0,\\"tag_arr\\":[],\\"background_color\\":\\"#44844E\\",\\"background_image\\":\\"\\",\\"created_at\\":1718864083,\\"discuss_num\\":0,\\"fav_num\\":0,\\"users_fav_logo\\":[],\\"hot_num\\":0,\\"id\\":22777,\\"intro\\":\\"游戏种草季，一入游戏深似海，从此钱包是路人。种草容易拔草难，沉迷游戏无法自拔，闹钟响起还想再战！不过话说回来，这草种得值，快乐翻倍不是吹！🎮🌱🤣\\",\\"is_fav\\":false,\\"is_hot\\":0,\\"is_new\\":1,\\"logo\\":\\"http://ali-img.100520.com/community/topic/202425/83f7bb2753112bcd912a53fa1de5a7f8.png\\",\\"notice\\":[],\\"release_info\\":null,\\"release_status\\":0,\\"title\\":\\"游戏种草\\",\\"type\\":1,\\"updated_at\\":1718864083}","text":"#游戏种草","textColor":"#31BC63","textSize":14.0,"value":"22777"}],"text":"#游戏种草 ","type":"normal"},{"inlineStyleEntityList":[],"text":"血之荣耀2传奇，战桩格斗游戏你们玩过吗？","type":"normal"}]',
  images: [
    'https://ali-rs.100520.com/community/post/202445/930f9322623ef3b3df5bed68033b8d66@2412x1080.jpg',
    // "https://ali-rs.100520.com/community/post/202445/492d895df646c23ad953abe4973ba87b@2412x1080.jpg",
    // "https://ali-rs.100520.com/community/post/202445/27bee5b401012c90077bd307e3e69ba2@2412x1080.jpg"
  ],
  video_url: '',
  video_pic: '',
  extra_url: '',
  extra_pic: '',
  extra_author: '',
  extra_source: '',
  top_num: 0,
  down_num: 1,
  comment_num: 0,
  fav_num: 0,
  app_id: 0,
  user_id: 20358915,
  type: 1,
  quote_id: 0,
  qid: 0,
  ip: '223.104.122.227',
  ip_region: '湖北',
  status: 1,
  reward_status: 0,
  edit_num: 0,
  total_edit_num: 3,
  is_forward: 0,
  audit_opinion: '',
  created_at: '2024-11-07 11:04:48',
  updated_at: '2024-11-07 11:04:48',
  app: null,
  topics: [
    {
      id: 22777,
      title: '游戏种草',
      intro:
        '游戏种草季，一入游戏深似海，从此钱包是路人。种草容易拔草难，沉迷游戏无法自拔，闹钟响起还想再战！不过话说回来，这草种得值，快乐翻倍不是吹！🎮🌱🤣',
      cate_id: 0,
      type: 1,
      model_id: 0,
      logo: 'community/topic/202425/83f7bb2753112bcd912a53fa1de5a7f8.png',
      background_image: '',
      background_color: '#44844E',
      fav_num: 0,
      discuss_num: 2,
      hot_num: 0,
      sort: 0,
      is_hot: 0,
      is_new: 1,
      is_top: 0,
      is_rec: 1,
      status: 1,
      is_close: 0,
      creator_id: 20897870,
      created_at: '2024-06-20 14:14:43',
      updated_at: '2024-06-20 14:14:43',
      deleted_at: null,
      pivot: {
        post_id: 158784,
        topic_id: 22777,
      },
    },
  ],
  user: {
    user_id: 20358915,
    name: '健康的小伙',
    avatar:
      'https://ali-rs.100520.com/avatar/202445/1e55a773a7f134ed88f41b165adf0c12.jpeg',
    brand: 'realme',
    device: 'RMX3770',
    device_name: '真我 11 Pro',
    state_ban_talk_day: false,
  },
  source_topic_id: 22777,
  source_topic: {
    id: 22777,
    title: '游戏种草',
    logo: 'community/topic/202425/83f7bb2753112bcd912a53fa1de5a7f8.png',
  },
})

const formRef = ref()
const visible22 = ref(false)
const handleOk = () => {
  // formRef.value.validate().then(() => {
  console.log('values', formState)
  // formRef.value.resetFields();
  // formState.screenshot =[]
  emit('submit', formState)
  emit('update:visible', false)
  // })
  // .catch(error => {
  //   console.log('error', error);
  // });
}

const likes = ref(0)
const dislikes = ref(0)
const action = ref()
const like = () => {
  likes.value = 1
  dislikes.value = 0
  action.value = 'liked'
}
const dislike = () => {
  likes.value = 0
  dislikes.value = 1
  action.value = 'disliked'
}

const comments = reactive([
  {
    author: 'Han Solo',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).',
    replies: [
      {
        author: 'Han Solo',
        content:
          '111111-We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure)',
        replies1: [
          {
            author: 'Han Solo',
            content:
              '111111-We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure)',
          },
          {
            author: 'Han Solo',
            content:
              '2222222-We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure)',
          },
        ],
      },
      {
        author: 'Han Solo',
        content:
          '2222222-We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure)',
      },
    ],
  },
])
const getRandomAvatar = () => {
  return 'https://joeschmoe.io/api/v1/random'
}
</script>

<style scoped>
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.form_tips {
  font-size: 14px;
  background: #edfaf1;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 16px;
  padding: 12px;
  color: #6e6e6e;
}
.form_tips i {
  font-style: normal;
}
.tips {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  color: #3c3c3c;
  font-weight: 400;
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 1200px; /* 限制最大宽度 */
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.comment_conent {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.comment_left {
  display: flex;
}
</style>
